<template>
  <div class="gallery w-full">
    <div v-for="(group) in groupedImages" :key="group.yearMonth">
      <el-divider content-position="left">{{ group.yearMonth }}</el-divider>
      <div class="images-in-group">
        <div
            v-for="(image) in group.images"
            :key="image.pic"
            class="image-container"
        >
          <el-image
              :alt="`Image${image.pic}`"
              :src="image.pic"
              :preview-src-list="group.images.map(img => img.pic)"
              fit="cover"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { defineProps, computed } from 'vue';

const props = defineProps<{
  images: Array<{
    pic: string;
    updateTime: string;
  }>;
}>();

const groupedImages = computed(() => {
  // 按更新时间倒序排序
  const sortedImages = [...props.images].sort((a, b) => {
    return new Date(b.updateTime).getTime() - new Date(a.updateTime).getTime();
  });

  // 按年月分组
  const groups: Record<string, Array<{ pic: string; updateTime: string }>> = {};

  sortedImages.forEach((image) => {
    const date = new Date(image.updateTime);
    const yearMonth = `${date.getFullYear()}年${(date.getMonth() + 1).toString().padStart(2, '0')}月`;
    if (!groups[yearMonth]) {
      groups[yearMonth] = [];
    }
    groups[yearMonth].push(image);
  });

  // 转换为数组并按年月倒序排序
  const groupArray = Object.keys(groups).map((yearMonth) => ({
    yearMonth,
    images: groups[yearMonth],
  }));

  groupArray.sort((a, b) => {
    const dateA = new Date(a.yearMonth.replace('年', '-').replace('月', '-01'));
    const dateB = new Date(b.yearMonth.replace('年', '-').replace('月', '-01'));
    return dateB.getTime() - dateA.getTime();
  });

  return groupArray;
});
</script>

<style scoped>
.gallery {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.images-in-group {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.image-container {
  display: inline-flex;
}

.image-container :deep(.el-image__inner) {
  width: 300px;
  height: 200px;
  transition: all 0.3s;
}

.image-container:hover :deep(.el-image__inner)  {
  width: 320px;
  height: 220px;
  transform: scale(1.05);
}
</style>